<template>
  <view class="page-detail">
    <view class="navbar">
      <u-icon
        name="arrow-left"
        color="#191919"
        size="20"
        @click="goBack()"
        class="back-box"
      ></u-icon>
      <view class="title">详情</view>
    </view>
    <view class="context content nyj-con-detail">
      <view class="number-title"></view>
      <u-cell-group
        title-bg-color="rgb(243, 244, 246)"
        customStyle="{'font-size': '16px'}"
      >
        <u-cell title="告警类型" :label="infoObj.alarmType" center></u-cell>
        <u-cell title="具体内容" :label="infoObj.msg" center></u-cell>
        <u-cell title="告警时间" :value="infoObj.alarmDate" center></u-cell>
        <u-cell title="处理方式" :value="detail.fddbr" center></u-cell>
      </u-cell-group>
    </view>
    <view class="nyj-btns btns">
      <button type="primary" v-if="infoObj.flag == 0" @click="goApply">
        审核
      </button>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择处理方式"
      @close="showSex = false"
      @select="processingSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
import { queryFirmInfo, queryCoalData } from "@/api/cockpit/need";
import { updateExceptionHandling } from "@/api/cockpit/cockpit";
export default {
  props: {
    ticketCode: {
      type: String,
    },
    pCode: {
      type: String,
    },
  },
  data() {
    return {
      showSex: false,

      actions: [
        {
          name: "已处理",
          value: 0,
        },
        {
          name: "无需处理",
          value: 1,
        },
        {
          name: "误报",
          value: 2,
        },
      ],
      show: false,
      infoObj: {},
      instanceId: "",
      detail: {},
      coalOptions: [],
    };
  },
  onShow() {},
  onLoad(option) {
    let dataInfo = option.dataInfo;
    this.infoObj = JSON.parse(dataInfo);
  },
  methods: {
    async processingSelect(e) {
      let res = await updateExceptionHandling({
        ids: [this.infoObj.id],
        processingStatus: e.value,
      });
      if (res.code == 200) {
        this.$modal.msgSuccess("处理成功");
        setTimeout(() => {
          // 返回之前页面
          this.$tab.reLaunch("/pages/home/index");
        }, 2000);
      }
    },
    goBack() {
      uni.navigateBack();
    },
    goApply() {
      this.showSex = true;
    },

    // 回显煤种数据文本
    getCoalTexts(datas, value, separator) {
      if (value === undefined) {
        return "";
      }
      if (datas == undefined) {
        return value;
      }
      var actions = [];
      var currentSeparator = undefined === separator ? "," : separator;
      var temp = value.split(currentSeparator);
      Object.keys(value.split(currentSeparator)).some((val) => {
        var match = false;
        Object.keys(datas).some((key) => {
          if (datas[key].coalNum == "" + temp[val]) {
            actions.push(datas[key].coalName + currentSeparator);
            match = true;
          }
        });
        if (!match) {
          actions.push(temp[val] + currentSeparator);
        }
      });
      return actions.join("").substring(0, actions.join("").length - 1);
    },
    preview() {
      this.$tab.navigateTo(
        `/pages/common/qrcode/index?code=${this.detail.ticketCode}`
      );
    },
    // 回显煤种数据文本
    getCoalTexts(datas, value, separator) {
      if (value === undefined) {
        return "";
      }
      if (datas == undefined) {
        return value;
      }
      var actions = [];
      var currentSeparator = undefined === separator ? "," : separator;
      var temp = value.split(currentSeparator);
      Object.keys(value.split(currentSeparator)).some((val) => {
        var match = false;
        Object.keys(datas).some((key) => {
          if (datas[key].coalNum == "" + temp[val]) {
            actions.push(datas[key].coalName + currentSeparator);
            match = true;
          }
        });
        if (!match) {
          actions.push(temp[val] + currentSeparator);
        }
      });
      return actions.join("").substring(0, actions.join("").length - 1);
    },
  },
};
</script>

<style lang="less" scoped>
.from-model {
  padding: 60rpx 50rpx;
}

.page-detail {
  .navbar {
    .header-info {
      display: flex;
      height: 90rpx;
      line-height: 90rpx;
      margin-top: 86rpx;

      .u-icon {
        width: 10%;
        padding-left: 25rpx;
      }

      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        width: 75%;
      }

      .right-btn {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }

  .top-box {
    background-image: url("/static/images/common/list-top-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 16rpx;
    margin-top: 20rpx;
  }

  .context {
    background-color: #ffffff;
    margin: 134rpx 20rpx 20rpx 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
    border-radius: 16rpx;

    .number-title {
      font-size: 28rpx;
      color: #233239;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      padding-right: 28rpx;
      text-align: right;
    }

    /deep/.u-cell {
      line-height: 96rpx;
    }

    /deep/.u-cell__title-text {
      font-size: 32rpx;
      color: #666666;
    }

    /deep/.u-cell__value {
      font-size: 34rpx;
      color: #333333;
    }

    /deep/.u-cell__label {
      font-size: 34rpx;
      color: #333333;
    }
  }

  .step-box {
    background: #ffffff;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
  }
}
</style>
